Correcting absolute and relative paths in web artifacts |
|
With the support of Organization Level Styling, there is a separation between artifacts that are available for all organizations and those that are available only in a specific organization. The main advantage is that customers can achieve different styling per organization. In addition, developers gain from this functionality as they can now test their own changes to Web artifacts without any impact on the work of other developers or testers who work on the same Process Platform environment.
By making the Process Platform Web front end multitenant, absolute paths to Web artifacts starting with /cordys/ will be mapped to the shared Web content instead of the organization-specific Web content. While publishing artifacts from a development workspace, these artifacts will be available in the run time of the respective organization only. If any of these artifacts link to another artifact through an absolute path starting with /cordys/, the system may not be able to find the linked Web artifact.
While developing user interfaces with the Process Platform UI designer, you do not need to consider absolute or relative paths to JavaScript (JS) libraries or Cascading Style Sheet (CSS) files that are linked. You only need to include the JavaScript libraries and CSS files using the available controls in the Process Platform UI designer. Then, the system ensures that the paths are correctly generated in the runtime counterpart of that user interface.
Organization-specific Web artifacts such as HTML, CSS, JS libraries, and images must be retrieved from the organization-specific Web location. To achieve this, all references to such libraries must be relative as absolute references starting with /cordys/ will be mapped to the shared Web location.
To benefit from organization level styling, all absolute paths must be corrected to their relative equivalents.
Correcting Absolute Paths
The correct way to refer to artifacts on the organization-specific Web server is by using relative paths. When a form or HTML library includes the application.js, this results in the BASE element to be set. Generic information about the BASE element can be found here. In the case of including application.js, the BASE element is set to the organization URL, /home/<organization name>. For Web artifacts loaded through /cordys and that come from the Shared space, the BASE element is set to /cordys. As a result of setting the BASE element, references to other Web artifacts must be the same as their qualified names. The following table displays some examples of old absolute paths and their relative counterparts using qualified names (new path):
Source artifact |
old path |
new path |
|---|---|---|
|
|
|
|
|
|
<organization URL>/a/b/c.caf |
/cordys/a/b/utils.js |
a/b/utils.js |
<organization URL>/b/c.html |
/cordys/a/b/utils.js |
d/e/utils.js |
<organization URL>/a/b/c.html |
/cordys/a/b/style.css |
a/b/style.css |
<organization URL>/b/c.caf |
/cordys/d/e/style.css |
d/e/style.css |
|
|
|
<organization URL>/a/b/c/mystyles.css |
/cordys/f/g/h/background.png |
../../../f/g/h/background.png |
References to Images, Javascript and CSS files from XForms and HTML files need to be handled with base relative urls. This means that the new URL is relative to the BASE url. Note that for references from within a CSS file to for example an image this is different as CSS files do not support base relative urls. From CSS files url references must be relative to the CSS file itself.
One tricky thing is that the BASE element is set only after including the application.js library. The inclusion of the application.js library itself is therefore done without the BASE element being set. As a result, the reference to application.js must use the correct relative path, starting from the location where the source artifact is stored. These relative paths consist of two parts:
- The part to navigate to the organization URL
- The qualified name of the linked Web artifact
The following table displays examples of relative paths to include the application.js:
From page |
Refer to |
|---|---|
|
|
|
|
|
|
Correcting Invalid Relative Paths
Application artifacts such as HTML libraries, CSS files, and JavaScript libraries are stored in CWS (Collaborative Workspace) as regular text files. CWS cannot recognize references from such artifacts to other artifacts. This makes it impossible to update such references whenever the relative path changes. As such, relative paths may become invalid. The scenarios in which this occurs are:
- Moving the artifact that includes the relative reference to a different location
- Moving the referenced artifact to a different location
In both scenarios, the developer must manually correct the relative reference to ensure the application functions correctly.
For example, when there is a CSS file that includes an image and you move the CSS file without moving the image, you need to update the image URL in the CSS file to the correct relative path.
Preperation for Dynamic Base URL and Future Changes
Currently, Process Platform supports only base-relative URLs. However, the upcoming Process Platform releases may also support the regular relative URLs.
To indicate that a form uses base-relative URLs, the attribute cordysDynamicallyInsertBase with the value "true" must be added to the HTML tag of each page as shown below. If this attribute is present, then Process Platform will dynamically (through JavaScript) insert the BASE tag.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html cordysDynamicallyInsertBase="true"> <head> </head> <body> <p>Have you seen our <a href="cages/birds.gif">Bird Cages</a>?</p> </body> </html>
 |
Warning Your pages may work fine in the current release even though the |